<template>
  <div>
    <router-view />
    <van-tabbar route v-model="active" active-color="#ee0a24" inactive-color="#000" v-if="$route.meta.isNav == true">
      <van-tabbar-item replace to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/type" icon="apps-o">类型</van-tabbar-item>
      <van-tabbar-item replace to="/car" icon="shopping-cart-o">购物车</van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="scss">
#app {
  font-size: 16px;
  color: #666;
  background-color: #f3f4f6;
  
}
*{
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
button,
textarea {
  border: none;
  outline: none;
}
.pd30 {
  padding: 30px;
}
.pd20 {
  padding: 20px;
}
.ptb20{
  padding:20px 0px
}
.ptb10{
  padding:10px 0px
}

.pd5{
  padding:5px 10px
}
.pd10 {
  padding: 10px;
}
.mt5{
  margin-top:5px
}
.mt10{
  margin-top: 10px;
}
.bg_ed {
  background-color: #f3f4f6;
}
.bg_f7 {
  background-color: #f7f7f7;
}
.bg_ff{
  background-color: #fff;
}

.flex {
  display: flex;
}

.flex_sb {
  display: flex;
  justify-content: space-between;
}
.flex_r_b{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center
}
.flex_sb_col {
  display: flex;

  flex-direction: column;
  align-items: center;
}

.flex_col {
  display: flex;
  flex-direction: column;
}

.font-999 {
  color: #999;
}

.font-7B7474 {
  color: #7b7474;
}

.font-AB956D {
  color: #ab956d;
}
.red {
  color: red;
}
</style>
<script>
export default {
  watch: {
    $route(a) {
      if (a.name == "home") {
        this.active = 0;
      } else if (a.name == "car") {
        this.active = 1;
      } else if (a.name == "my") {
        this.active = 2;
      }
    },
  },
  data() {
    return {
      active: 0,
    };
  },
};
</script>